import { useState ,useEffect} from "react";
import { Button, Form, Input, message } from "antd";
import { UserOutlined, LockOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { loginApi } from "@/api/api";

import { useNavigate } from "react-router-dom";
import { Login } from "@/api/interface";
import { setMenuList } from "@/redux/modules/menu/action";
import { setToken } from "@/redux/modules/global/action";
import { connect,useDispatch,useSelector } from "react-redux";
import { Dispatch } from "redux";
import verifyPhoneNum from "./phoneCheck"
const LoginForm = (props:any) => {
	let  {menuList,setList} = props;
	const dispatch=useDispatch()
	const { setToken } = props;
	const navigate = useNavigate();
	const [form] = Form.useForm();
	const [loading, setLoading] = useState<boolean>(false);
	const onFinish = async(loginForm: Login.ReqLoginForm) => {
		try {
			setLoading(true);
			menuList = [
				{
				  title: '个人日程',
				  path: '/home/schedule',
				  key:0,
				},
				{
				  title: '我的空闲时间段',
				  path: '/home/schedule/free',
				  key:1,
				},
				{
				  title: '上月打卡记录',
				  path: '/home/schedule/record',
				  key:2,
				},
				{
				  title: '我的参与课程',
				  path: '/home/schedule/courses',
				  key:3,
				},
				{
				  title: '我的设置',
				  path: '/home/schedule/setting',
				  key:4,
				}
			  ];
			  setList(menuList)
			  const { data } = await loginApi(loginForm);
			  dispatch(setToken(data?.token));
			message.success("登录成功！");
			navigate('/home/schedule/free');
		} catch{
			
		}
		finally {
			setLoading(false);
		}
	};
    const onFinishFailed = (errorInfo:any) => {
		console.log("Failed:", errorInfo);
	};
	useEffect(() => {
	
	}, []);
    return(
		<Form
			form={form}
			name="basic"
			labelCol={{ span: 5 }}
			initialValues={{ remember: true }}
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			size="large"
			autoComplete="off"
		>
			<Form.Item name="userName" rules={[{ required: true, message: "请输入用户名" }]}>
				<Input 
				placeholder="用户名：15688884444" 
				prefix={<UserOutlined />}
				maxLength = {11}
				onChange={() => {
					let phoneNum = form.getFieldValue('userName');
					let bool = verifyPhoneNum(phoneNum);
					// 当手机号码填到11位的时候开启校验
					if (!bool && phoneNum.length == 11) {
						return message.error('请填写正确的手机号码！')
					}
				}}
				 />
			</Form.Item>
			<Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
				<Input.Password autoComplete="new-password" placeholder="密码：password123" prefix={<LockOutlined />} />
			</Form.Item>
			<Form.Item className="login-btn">
                <Button type="primary" htmlType="submit"  loading={loading} icon={<UserOutlined />}>
					{"登录"}
				</Button>
				<Button
					onClick={() => {
						form.resetFields();
					}}
					icon={<CloseCircleOutlined />}
				>
					{"重置"}
				</Button>
			</Form.Item>
		</Form>
	);
}

const mapDispatchToProps = (dispatch:Dispatch)=>{
  return {
	setList: (menuList:any) => dispatch(setMenuList(menuList)),
	setToken,
  }
};
export default connect(null, mapDispatchToProps)(LoginForm);